import React, { useState,useEffect } from 'react';
import { Steps, Row, Col} from 'antd';
import Step1 from './step1';
import Step2 from './step2';
import Step3 from './step3';
import '../../operator.less';
const { Step } = Steps;
export default function(props) {
  const [current, setCurrent] = useState(0);
  const [submitData, setSubmitData] = useState({}); // 导入确认数据
  const [nameObject, setNameObject] = useState({});
  const [appData, setAppData] = useState([]); // 渠道
  const [productData, setProductData] = useState([]); // 产品
  const [stepdata, setStepData] = useState({}); // 导入到系统数据
  const [files, setFiles] = useState({}); // 文件上传回显
  useEffect(() => {
    setAppData(props.appData);
    setProductData(props.productData);
  },[props.appData, props.productData])
  // 下一页
  function goStepThree() {
    setCurrent(1);
  }
  // 上一页
  function goPrevStep() {
    setCurrent(0);
  }
  // 导入系统
  function goToStep() {
    setCurrent(2);
  }
  // 数据确认产品和渠道名称
  function getAppAndProcut(data) {
    setNameObject(data);
  };
  // 数据确认导入
  function submitDatas(data) {
    setSubmitData(data);
  };
    // 回显数据
  function backDataFn(data) {
      if (data.appIds.app_id !== appData.app_id) {
        data.appIds.is_modify = true
        setAppData(data.appIds)
      }
      if (data.productIds.product_id !== productData.product_id) {
        data.productIds.is_modify = true
        setProductData(data.productIds)
      }
      setFiles(data.files)
  };
  // 数据导入系统确认
  function setStep(data) {
    setStepData(data);
  };
  const steps = [
    {
      title: '上传文件'
    },
    {
      title: '确认导入数据'
    },
    {
      title: '导入到系统'
    }
  ];
  return (
    <div className='strategy-operater-wp'>
      <div className='strategy-operater-hd'>
        <Row type='flex' justify='center'>
          <Col span={12}>
             <Steps current={current}>
               {steps.map(item => (
                  <Step key={item.title} title={item.title} />  
               ))}
             </Steps>
          </Col>
        </Row>
       </div>
       {current === 0 && (
        <>
          <Step1 
            data={props.tableData}
            insideData={props.insideData} 
            columns={props.coumsList} 
            insideColumns={props.insideList}
            type={props.type}
            setDataFn={props.setDataFn}
            existedEvent={props.existedEvent}
            evenData={props.evenData}
            appData={appData}
            fileId={props.fileId}
            productData={productData}
            files={files}
            selectApp={(value) => {props.selectApp && props.selectApp(value)}}
            setSubmitData={submitDatas}
            setAppAndProcut={getAppAndProcut}
            goto={goStepThree}
            setBackData={backDataFn}
            getRule={props.getRule}
          />
        </>
      )}
      {
        current === 1 && (
          <>
            <Step2
            {...props}
             goPrev={goPrevStep}
             goTo={goToStep}
             setStep={setStep}
             submitData={submitData}
             fileId={props.fileId} 
             nameData={nameObject}
             type={props.type}
             actions={submitData.actions}
             ></Step2>
          </>
        )
      }
      {
        current === 2 && (
          <>
            <Step3 data={stepdata}></Step3>
          </>
        )
      }
    </div>
  );
}